<template>
  <fieldset>
    <legend>侦听器</legend>
    <input type="text" v-model="val" />
    <h1>{{ props.testVal }}</h1>
    <button>点击</button>
    <button @click="handleClick2">点击2</button>
    <button>点击3</button>
  </fieldset>
</template>
<script setup>
import { ref, defineProps, watch, nextTick, reactive } from "vue";
let val = ref("");
let props = defineProps(["testVal"]);
// let msg1 = ref("");
// let msg2 = ref("小日子");
// let handleClick2 = async () => {
//   msg1.value = "德国";
//   await nextTick();
//   msg2.value = "日本";
// };

// watch([msg1, msg2], (newVal) => {
//   console.log(newVal);
// });
let obj = reactive({
  name: "李雷",
  age: 20,
  person: {
    nickname: "卢本伟",
  },
});
setTimeout(() => {
  obj.name = "韩梅梅";
  obj.person.nickname = "55开";
});
watch(
  () => obj.name,
  (newVal) => {
    console.log(newVal);
  }
);
watch(
  () => obj.person,
  (newVal) => {
    console.log(newVal);
  },
  { deep: true, immediate: true }
);
</script>
<style scoped></style>
